import React from 'react';
import Mask from '@/components/Mask';
import QRCode from 'qrcode.react';
import { Button } from 'antd'
import domtoimage from 'dom-to-image';
export default (props) => {
  const { visible = {}, show } = props;
  const { details = {} } = visible;
  const { wechatUrl = '' } = details;
  const handleSaveAsImage = () => {
    const node = document.getElementById('qrCode'); // 获取QRCode组件的DOM元素

    domtoimage.toBlob(node)
      .then(function (blob) {
        // 使用Blob生成下载链接
        const url = URL.createObjectURL(blob);
        // 创建一个链接并单击下载
        const link = document.createElement('a');
        link.href = url;
        link.download = '分享码.png';
        link.click();
      });
  }

  return (
    <Mask title={'下载二维码'} {...props}>
      <QRCode
        id="qrCode"
        value={wechatUrl}
        size={200} // 二维码的大小
        fgColor="#000000" // 二维码的颜色
        style={{ margin: 'auto' }}
      />
      <div style={{ textAlign: 'center' }}>
        <Button onClick={() => handleSaveAsImage()} type='link'>
          下载
        </Button>
      </div>

    </Mask>
  );
};
